<template>
	<div class="home">
		<!-- 头部 -->
		<h3 style="text-align: center;">列表</h3>
		<!-- 添加 -->
		<el-row :gutter="15">
			<!-- 行 :gutter="20" 此行列与列之间间隔20px -->
			<el-col :span="8">
				<!-- 列 :span=8 占8份 共有24份 -->
				<el-input v-model="title" placeholder="请输入标题"></el-input>
			</el-col>
			<el-col :span="8">
				<el-input v-model="content" placeholder="请输入内容"></el-input>
			</el-col>
			<el-col :span="8">
				<el-button type="primary" @click='handleAdd()'>添加</el-button>
			</el-col>
		</el-row>
		<template>
			<el-table :data="tableData" style="width: 100%">

				<el-table-column prop="title" label="标题" width="180"></el-table-column>

				<el-table-column prop="content" label="内容"></el-table-column>

				<el-table-column prop="add_time" label="时间" width="180"></el-table-column>

				<el-table-column label="操作" width="180">
					<!-- 用template包住el-button，设置插槽scope，scope.row获取本行被存放的所有数据 -->
					<!-- scope.row.id获取数据的id值 -->
					<template v-slot="scope">
						<el-button type="danger" @click='handleDelete(scope.row.id)'>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="pageindex" :page-sizes="[5, 6, 7, 8]" :page-size="pagessize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>		
	</div>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
				title: '',
				/* 新添加的数据的标题 */
				content: '',
				/* 新添加的数据的内容 */
				tableData: [],
				pageindex: 1, /* 默认最开始进行分页的起始页，一般为第1页 */
				/* pagessize每页放多少条数据，pagessize要和:page-sizes="[...]"第一个元素保持一致
				   不然会发生冲突*/
				pagessize: 5, 
				total: 0
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData() {
				this.$axios.get('/api/get/news', {
					params: {
						pageindex: this.pageindex,
						pagessize: this.pagessize
					}
				}).then(res => {
					this.tableData = res.data.data;
					this.total = res.data.total
					/* console.log(res.data.data); */
				})
			},
			//添加数据请求
			async handleAdd() {
				/* 请求添加数据的操作一定完全执行完才能继续执行下一句，所以要用async 和 await */
				/* post请求时带参，直接传，不用放在params里 */
				const result = await this.$axios.post('/api/add/news', {
					title: this.title,
					content: this.content
				});
				this.getData(); //获取最新数据
			},
			//删除数据请求
			async handleDelete(id) {
				console.log(id);
				/* 请求删除数据的操作一定完全执行完才能继续执行下一句，所以要用async 和 await */
				const result = await this.$axios.post('/api/del/news', {
					id
				});
				this.getData(); //获取最新数据
			},
			
			/* handleSizeChange：修改每页存放数据条数触发，参数
			   val会自动获取每页存放数据条数，是elementui这个框
			   架搞好的，你只要把val赋给this.pagessize，然后记
			   得一定要更新数据，调用this.getData(); */
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pagessize = val
				this.getData();
			},
			
			/* handleCurrentChange：修改当前页时触发，即页跳转时触发，
			   你只要把val赋给this.pagessize，参数val会自动获取当前页，
			   你只要把val赋给this.pageindex，然后记得一定要更新数据，
			   调用this.getData(); */
			handleCurrentChange(val) {//页跳转
				console.log(`当前页: ${val}`);
				this.pageindex = val;
				this.getData();
			}			
		}
	}
</script>
